<script setup lang="ts">
import keywordTitle from '@/components/KeywordTitle/index.vue'
import ItemVideo from '@/components/ItemVideo/index.vue'
import BtnFollow from '@/components/BtnFollow/index.vue'
import ChangeButton from '@/components/ChangeButton/index.vue'
import APIDetails from '@/api/details'
import type { AdverData, AdverResult } from '@/api/details/types'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { useAuth } from '@/stores/index'

const activeIndex = shallowRef<AdverData>('video')
const loading = shallowRef<boolean>(false)

const { token } = storeToRefs(useAuth())
const { isNextOperation } = useAuth()


watch(activeIndex, () => {
    getList()
}, { immediate: true })

const list = ref<AdverResult[]>([])

function getList() {
    if (token.value) {
        getLoginAdver(activeIndex.value)
    } else {
        getAdver(activeIndex.value)
    }
}

function getLoginAdver(type: AdverData) {
    loading.value = true
    APIDetails.getLoginAdver(type).then(({ data }) => {
        list.value = data
    }).finally(() => {
        loading.value = false
    })
}

function getAdver(type: AdverData) {
    loading.value = true
    APIDetails.getAdver(type).then(({ data }) => {
        list.value = data
    }).finally(() => {
        loading.value = false
    })
}
const $router = useRouter()

function handleJumpMusicDetails(id: any) {
    window.open($router.resolve(`/music-details/${id}?categoryType=Music`).href, '_blank')
}

function handleJumpPictureDetails(id: any) {
    window.open($router.resolve(`/picture-details/${id}?categoryType=Picture`).href, '_blank')
}

function handleJumpVideoDetails(id: any) {
    window.open($router.resolve(`/video-details/${id}?categoryType=Video`).href, '_blank')
}

function handleJumpFontDetails(id: any) {
    window.open($router.resolve(`/font-details/${id}?categoryType=Font`).href, '_blank')
}


function submitAttention(Invite_code?: string) {
    if (!isNextOperation()) return
    ElMessageBox.confirm(
        '是否关注该店铺？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (!Invite_code) return
        const loading = ElLoading.service({ lock: true })
        APIDetails.setUserConcern(Invite_code).then(() => {
            getList()
        }).finally(() => {
            loading.close()
        })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

function submitUnfollow(Invite_code?: string) {
    if (!isNextOperation()) return
    ElMessageBox.confirm(
        '是否取消关注该店铺？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (!Invite_code) return
        const loading = ElLoading.service({ lock: true })
        APIDetails.cancelUserConcern(Invite_code).then(() => {
            getList()
        }).finally(() => {
            loading.close()
        })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

</script>

<template>
    <div class="advertising">
        <div class="title">
            <div class="left">
                <keywordTitle title="平台广告" />
                <div class="tags">
                    <div class="tag" :class="{ active: activeIndex == 'video' }" @click="activeIndex = 'video'">视频</div>
                    <div class="tag" :class="{ active: activeIndex == 'picture' }" @click="activeIndex = 'picture'">图片
                    </div>
                    <div class="tag" :class="{ active: activeIndex == 'music' }" @click="activeIndex = 'music'">音乐</div>
                    <div class="tag" :class="{ active: activeIndex == 'font' }" @click="activeIndex = 'font'">字体</div>
                </div>
            </div>
            <ChangeButton @click="getAdver(activeIndex)" class="right" />
        </div>
        <div v-loading="loading">
            <el-empty description="暂无内容" v-if="list.length == 0" :image-size="82" />
            <div class="video" v-show="activeIndex == 'video'">
                <div class="item" v-for="item in list" :key="item.id">
                    <ItemVideo :image="item.image" :sample="item.sample" @click="handleJumpVideoDetails(item.id)" />
                    <div class="bottom">
                        <div class="bottom-left">
                            <div class="photo">
                                <img :src="item?.user?.head_img" alt="head_img">
                            </div>
                            <button type="button" @click="submitAttention(item?.user?.Invite_code)"
                                v-if="item?.user?.is_concern == 0">关注</button>
                            <button type="button" style="background-color: #9499a0;"
                                @click="submitUnfollow(item?.user?.Invite_code)"
                                v-if="item?.user?.is_concern == 1">已关注</button>
                        </div>
                        <div class="bottom-right">
                            <p>{{ item.title }}</p>
                            <p>¥ {{ item.get_peice }} <span>到手价</span></p>
                            <p>销量：<span>{{ item.sales || 0 }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="picture" v-show="activeIndex == 'picture'">
                <div class="item" v-for="item in list" :key="item.id">
                    <img :src="item.image" alt="image" @click="handleJumpPictureDetails(item.id)">
                    <div class="bottom">
                        <div class="bottom-left">
                            <div class="photo">
                                <img :src="item?.user?.head_img" alt="head_img">
                            </div>
                            <button type="button" @click="submitAttention(item?.user?.Invite_code)"
                                v-if="item?.user?.is_concern == 0">关注</button>
                            <button type="button" style="background-color: #9499a0;"
                                @click="submitUnfollow(item?.user?.Invite_code)"
                                v-if="item?.user?.is_concern == 1">已关注</button>
                        </div>
                        <div class="bottom-right">
                            <p>{{ item.title }}</p>
                            <p>¥ {{ item.get_peice }} <span>到手价</span></p>
                            <p>销量：<span>{{ item.sales || 0 }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="picture" v-show="activeIndex == 'music'">
                <div class="item" v-for="item in list" :key="item.id">
                    <img :src="item.image" alt="image" @click="handleJumpMusicDetails(item.id)">
                    <div class="bottom">
                        <div class="bottom-left">
                            <div class="photo">
                                <img :src="item?.user?.head_img" alt="head_img">
                            </div>
                            <button type="button" @click="submitAttention(item?.user?.Invite_code)"
                                v-if="item?.user?.is_concern == 0">关注</button>
                            <button type="button" style="background-color: #9499a0;"
                                @click="submitUnfollow(item?.user?.Invite_code)"
                                v-if="item?.user?.is_concern == 1">已关注</button>
                        </div>
                        <div class="bottom-right">
                            <p>{{ item.title }}</p>
                            <p>¥ {{ item.get_peice }} <span>到手价</span></p>
                            <p>销量：<span>{{ item.sales || 0 }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="picture" v-show="activeIndex == 'font'">
                <div class="item" v-for="item in list" :key="item.id">
                    <img :src="item.image" alt="image" @click="handleJumpFontDetails(item.id)">
                    <div class="bottom">
                        <div class="bottom-left">
                            <div class="photo">
                                <img :src="item?.user?.head_img" alt="head_img">
                            </div>
                            <button type="button" @click="submitAttention(item?.user?.Invite_code)"
                                v-if="item?.user?.is_concern == 0">关注</button>
                            <button type="button" style="background-color: #9499a0;"
                                @click="submitUnfollow(item?.user?.Invite_code)"
                                v-if="item?.user?.is_concern == 1">已关注</button>
                        </div>
                        <div class="bottom-right">
                            <p>{{ item.title }}</p>
                            <p>¥ {{ item.get_peice }} <span>到手价</span></p>
                            <p>销量：<span>{{ item.sales || 0 }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.advertising {
    .picture {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 18px;

        .item {
            margin: 22px 0;

            >img {
                width: 100%;
                height: 180px;
                object-fit: cover;
                display: block;
                cursor: pointer;
            }

            .bottom {
                box-sizing: border-box;
                width: 100%;
                background-color: #EEEFF0;
                padding: 8px 18px;
                display: flex;
                font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

                .bottom-right {
                    margin-left: 14px;

                    p {
                        &:nth-child(1) {
                            color: #4F4F4F;
                            font-size: 14px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 212px;
                            font-family: 'SOURCEHANSANSCN-LIGHT';
                        }

                        &:nth-child(2) {
                            color: rgba(249, 20, 20, 1);
                            font-size: 20px;
                            font-family: 'SOURCEHANSANSCN-REGULAR';

                            span {
                                font-size: 12px;
                            }
                        }

                        &:nth-child(3) {
                            color: rgba(79, 79, 79, 1);
                            font-size: 14px;

                            span {
                                color: #3785F2;
                            }
                        }
                    }
                }

                .bottom-left {
                    button {
                        width: 40px;
                        height: 18px;
                        line-height: 18px;
                        border-radius: 5px;
                        background-color: rgba(249, 20, 20, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 12px;
                        border: none;
                        cursor: pointer;
                        display: block;
                        margin: 0 auto;
                        margin-top: 6px;
                    }

                    .photo {
                        width: 46px;
                        height: 46px;
                        border-radius: 50%;
                        background-color: #9A9A9A;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            display: block;
                        }
                    }
                }
            }
        }
    }

    .video {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 18px;

        .item {
            margin: 22px 0;

            .bottom {
                box-sizing: border-box;
                width: 100%;
                background-color: #EEEFF0;
                padding: 8px 18px;
                display: flex;
                font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

                .bottom-right {
                    margin-left: 14px;

                    p {
                        &:nth-child(1) {
                            color: #4F4F4F;
                            font-size: 14px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 212px;
                            font-family: 'SOURCEHANSANSCN-LIGHT';
                        }

                        &:nth-child(2) {
                            color: rgba(249, 20, 20, 1);
                            font-size: 20px;
                            font-family: 'SOURCEHANSANSCN-REGULAR';

                            span {
                                font-size: 12px;
                            }
                        }

                        &:nth-child(3) {
                            color: rgba(79, 79, 79, 1);
                            font-size: 14px;

                            span {
                                color: #3785F2;
                            }
                        }
                    }
                }

                .bottom-left {
                    button {
                        width: 40px;
                        height: 18px;
                        line-height: 18px;
                        border-radius: 5px;
                        background-color: rgba(249, 20, 20, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 12px;
                        border: none;
                        cursor: pointer;
                        display: block;
                        margin: 0 auto;
                        margin-top: 6px;
                    }

                    .photo {
                        width: 46px;
                        height: 46px;
                        border-radius: 50%;
                        background-color: #9A9A9A;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            display: block;
                        }
                    }
                }
            }
        }
    }


    .title {
        height: 62px;
        line-height: 20px;
        background-color: rgba(238, 239, 240, 1);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .right {
            margin-right: 20px;
        }

        .left {
            display: flex;

            .tags {
                display: flex;
                gap: 0 25px;
                margin-left: 28px;
                font-size: 16px;
                color: #9A9A9A;

                .tag {
                    cursor: pointer;
                    font-family: 'SOURCEHANSANSCN-LIGHT';
                }

                .active {
                    color: var(--primary-color);
                    font-family: 'SOURCEHANSANSCN-REGULAR';
                }
            }
        }
    }
}
</style>